<template>
  <div class="empty">
    <div class="content">
      <div class="apply-bg">
        <div class="apply-content">
          <div class="apply-left">
            <div class="img-wrap">
              <img
                v-if="applyNotice.isMt == '1'"
                src="../assets/images/apply-end.png"
                alt=""
              />
              <img
                v-else-if="applyNotice.isMt == '2'"
                src="../assets/images/not-begin.png"
                alt=""
              />
            </div>
            <p>{{ applyNotice.mtExplain }}</p>
          </div>
          <div class="apply-right">
            <ul>
              <li class="right-item"><a href="#">政策法规</a></li>
              <li class="right-item"><a href="#">学区图</a></li>
              <li class="right-item"><a href="#">学区查询</a></li>
              <li class="right-item"><a href="#">问题答疑</a></li>
              <li class="right-item"><a href="#">咨询电话</a></li>
              <li class="right-item"><a href="#">操作指南</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSysPara, getSysZt } from "../utils/api";
export default {
  name: "Empty",
  data() {
    return {
      applyNotice: {},
    };
  },
  methods: {
    async getSysName(type) {
      try {
        const data = await getSysPara(type);
        if (data.res == 0) {
          this.$store.dispatch("setWpzswTitle", data.data[0].value);
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          this.applyNotice = data.data;
        }
      } catch (error) {}
    },
  },
  computed: {
    wpzswTitle() {
      return this.$store.state.wpzswTitle;
    },
  },
  created() {
    this.getSysName("SysName");
    this.getSysZt();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.empty {
  min-height: 93vh;
  // background-color: #fff;
  background-color: #4db4fe;
}

.content {
  // padding-top: 70px;
  .apply-bg {
    // width: 870px;
    width: 100%;
    // height: 801px;
    background-color: #4db4fe;
    margin: auto;
    .apply-content {
      padding-top: 80px;
      display: flex;
      align-items: center;
      flex-direction: column;
      overflow: hidden;
      .apply-left {
        width: 600px;
        // height: 640px;
        padding-bottom: 60px;
        border-radius: 10px;
        background: url(../assets/images/bg-apply-left.png) no-repeat center top /
          cover;
        overflow: hidden;
        z-index: 2;
        .img-wrap {
          width: 582px;
          margin-left: 7px;
          height: 166px;
          background-color: #f5f5f5;
          margin-top: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          padding: 0 40px;
          img {
            width: 100%;
          }
        }
        p {
          font-size: 34px;
          text-align: justify;
          margin-top: 40px;
          padding: 0 40px;
          color: #333;
        }
      }
      .apply-right {
        width: 600px;
        margin-top: 40px;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
        }
        .right-item {
          width: 160px;
          // width: 30%;
          height: 60px;
          margin: 10px 20px;
          background: url(../assets/images/bg-right-item.png) no-repeat center;
          box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
          line-height: 60px;
          font-size: 28px;
          border-radius: 4px;
          position: relative;
        }
      }
    }
  }
}
</style>
